<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>校园交流平台</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <!-- 引入vuejs -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入element样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入element组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--模板通用css-->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入wangEdit富文本编辑器 -->
    <script type="text/javascript" src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
</head>
<body>
    <el-container id="app" v-cloak>
            <div th:replace="fragment/common::header"></div>
            <div class="pad"></div>
            <el-main>
                <el-card  class="box-card">
	                <el-breadcrumb separator-class="el-icon-arrow-right">
	                    <el-breadcrumb-item><a href="forum">校园论坛</a></el-breadcrumb-item>
	                    <el-breadcrumb-item><a href="themelist">主题列表</a></el-breadcrumb-item>
	                    <el-breadcrumb-item><a @click="toMainList">主贴列表</a></el-breadcrumb-item>
	                    <el-breadcrumb-item>新增主贴</el-breadcrumb-item>
	                </el-breadcrumb>
                    <div style="margin-top:20px;">
                        <el-input v-model="mainposts.title" maxlength="100" placeholder="输入主贴标题" show-word-limit clearable></el-input>
                    </div>
                    <div id="editor1" class="headdiv">
                        </div>
                    <div id="editor2" class="contentdiv">
                    </div>
                    <el-row style="margin-top:30px;">
                        <el-col :span="4" :offset="10">
                            <el-button type="primary" @click="submit" style="width:99%;">保存</el-button>
                        </el-col>
                    </el-row>
                </el-card>

            </el-main>
            
    </el-container>
    <script th:inline="javascript">
        var editor;
        new Vue({
            el:'#app',
            data(){
                return{
                	activeIndex: '',
                    userName:'张三 ',
                    mainposts:{}
                }
            },
            created:function(){
            	this.userName=[[${session.userName}]];
            	this.mainposts.themeid=[[${themeId}]];
            },
            mounted:function(){
            	var _this=this;
                var E = window.wangEditor;
                editor = new E('#editor1','#editor2');
                editor.customConfig.zIndex = 1;
                // 自定义菜单配置
                editor.customConfig.menus = [
                    'head',  // 标题
                    'bold',  // 粗体
                    'fontSize',  // 字号
                    'fontName',  // 字体
                    'italic',  // 斜体
                    'underline',  // 下划线
                    'strikeThrough',  // 删除线
                    'foreColor',  // 文字颜色
                    'backColor',  // 背景颜色
                    'link',  // 插入链接
                    'list',  // 列表
                    'justify',  // 对齐方式
                    'quote',  // 引用
                    'emoticon',  // 表情
                    'image',  // 插入图片
                    'code',  // 插入代码
                    'undo',  // 撤销
                    'redo'  // 重复
                ]
                editor.customConfig.uploadImgServer = 'blogimageupload';
                editor.customConfig.uploadFileName = 'blogimage';
                editor.customConfig.uploadImgHooks = {
                		customInsert: function (insertImg, result, editor) {
                			var url=result.data[0];
                			insertImg(url);
                		}
                };
                editor.customConfig.customAlert = function (info) {
                    _this.$message.error("图片插入失败");
                };
                editor.create();
            },
            methods:{
            	//选择nav选项
            	handleSelect(key, keyPath){
                    switch(key){
                    case '1':
                    	window.location.href="index";
                    	break;
                    case '2':
                    	window.location.href="forum";
                        break;
                    case '3':
                    	window.location.href="blog";
                        break;
                    case '4-1':
                        window.location.href="http://www.dl-city.com/";
                        break;
                    case '4-2':
                        window.location.href="http://citytsg.dlut.edu.cn/index.htm";
                        break;
                    case '4-3':
                        window.location.href="http://cityftp.dlut.edu.cn/index.htm";
                        break;
                    case '4-4':
                        window.location.href="http://172.30.2.66/vod/action/indexListAction.do?method=indexShow";
                        break;
                    case '4-5':
                        window.location.href="http://tv.byr.cn/show";
                        break;k;
                    }
                },
                //发布或修改博文
                submit(){
                    if(this.mainposts.title==null||this.mainposts.title.length==0){
                        this.$message.warning("主贴标题不能为空");
                        return false;
                    }
                    this.mainposts.content=editor.txt.html();
                    var param=JSON.stringify(this.mainposts);
                    var _this=this;
                    $.ajax({
                    	url:'submitmainposts',
                    	type:'POST',
                    	data:param,
                    	contentType:'application/json;charset=UTF-8',
                    	dataType:'JSON',
                    	success:function(data){
                    			window.location.href='mainpostslist?themeId='+_this.mainposts.themeid;
                    	}
                    });
                },
                toMainList(){
                	window.location.href='mainpostslist?themeId='+this.mainposts.themeid;
                }
            }
        })
    </script>
    <style>
        .box-card{
            width:80%;
            padding:20px;
            height:1000px;
            margin:0 auto;
        }
        .headdiv{
            border: 1px solid #ccc;
            margin-top:20px;
        }
        .contentdiv{
            border: 1px solid #ccc;
            height: 750px;
        }
    </style>
</body>
</html>